// import { useState } from "react";
// import InfiniteScrollComponent from "react-infinite-scroll-component";
// import { useMount } from "react-use";

// const InfiniteScroll: React.FC = () => {
//   // 模拟的数据数组
//   const [items, setItems] = useState<any[]>([]);
//   // 模拟的加载状态
//   const [hasMore, setHasMore] = useState(true);

//   // 加载更多数据的函数
//   const fetchMoreData = async () => {
//     console.log("加载");
//     if (items.length > 50) {
//       setHasMore(false);
//       return;
//     }

//     await new Promise((resolve) => setTimeout(resolve, 1000));

//     const newItems = Array.from(
//       { length: 20 },
//       (_, index) => `Item ${index + items.length + 1}`
//     );
//     setItems([...items, ...newItems]);
//   };

//   useMount(() => {
//     fetchMoreData();
//   });

//   return (
//     <div className=" p-4">
//       <div className="text-xl">无限滚动示例</div>
//       <InfiniteScrollComponent
//         dataLength={items.length}
//         next={fetchMoreData}
//         hasMore={hasMore}
//         loader={<h4>Loading...</h4>}
//         endMessage={
//           <div className="text-center text-gray-400 text-sm">
//             没有更多数据了
//           </div>
//         }
//       >
//         {items.map((item, index) => (
//           <div key={index}>{item}</div>
//         ))}
//       </InfiniteScrollComponent>
//     </div>
//   );
// };

// export default InfiniteScroll;
